@charset "utf-8";

@import "common";

.i_warp{
    position: relative;
    width: 100%;
    font-size: r(12px);
    font-weight: 300;
}
header{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: r(274px);
    overflow: hidden;
    color: #fff;
    background: #fff;
    >img{
        display: block;
        width: 100%;
        height: 100%;
        filter: blur(36px);
        object-fit: cover;
    }
    .info_box__bd{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        background: rgba(0,0,0,.5);
        >.top_bar{
            position: relative;
            display: -webkit-box;
            -webkit-box-align: center;
            height: r(48px);
            padding: 0 r(16px) 0 r(14px);
            color: #fff;
            background: rgba(0,0,0,.2);
            >img{
                display: block;
                width: 36px;
                margin-right: 3px;
            }
            .top_bar__tit{
                line-height: 1.3em;
                font-size: r(14px);
                font-weight: 300;
            }
            .top_bar__desc{
                font-size: r(10px);
            }
            >a{
                position: absolute;
                right: r(16px);
                top: r(12px);
                display: block;
                height: r(24px);
                padding: 0 r(12px);
                line-height: r(24px);
                font-size: r(15px);
                color: #fff;
                pointer-events: none;
                border-style: solid;
                border-color: currentColor;
                border-width: 1px;
                border-radius: 999px;
            }
        }
        >.album{
            display: flex;
            align-items: center;
            -webkit-box-orient: horizontal;
            width: 100%;
            margin-top: r(17px);
            padding: 0 r(16px);
            overflow: hidden;
            >.album__media{
                width: r(125px);
                min-width: r(125px);
                height: r(125px);
                margin-right: r(10px);
                >img{
                    width: 100%;
                    height: 100%;
                   display: block; 
                }
            }
            >.album__bd{
                >h1{
                    max-height: r(47px);
                    line-height: 1.3;
                    overflow: hidden;
                    font-size: r(18px);
                    font-weight: 300;
                }
                .author{
                    display: flex;
                    align-items: center;
                    margin-top: r(8px);
                    overflow: hidden;
                    >img{
                        display: block;
                        width: r(24px);
                        height: r(24px);
                        margin-right: r(8px);
                        border-radius: r(24px);
                    }
                    span{
                        display: block;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: r(14px);
                        color: #fff;
                    }
                }
                .album__desc{
                    -webkit-line-clamp: 2;
                    font-size: r(13px);
                    max-height: r(36px);
                    overflow: hidden;
                    margin-top: r(8px);
                }
            }
        }
        .opt_box{
            height: r(84px);
            padding: 0 r(16px);
            display: flex;
            align-items: center;
            justify-content: center;
            >.btn_play_all{
                display: block;
                text-align: center;
                width: r(170px);
                height: r(40px);
                line-height: r(40px);
                overflow: hidden;
                text-align: center;
                font-size: r(16px);
                color: #fff;
                border-radius: r(20px);
                background: #31c27c;
                &:before{
                    content: "";
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border: r(7px) solid transparent;
                    border-left: r(11px) solid transparent;
                    border-left-color: #fff;
                    border-radius: r(2px);
                }
            }
            >.play_bar{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .play_btn{
                    display: block;
                    width: r(46px);
                    height: r(46px);
                    fill: #31c27c;
                    #icon_pause_thin{
                        display: none;
                    }
                    .circle{
                        transform: rotate(-90deg);
                        transform-origin: center center; 
                        fill: none;
                        /*內填充*/
                        stroke: #31c27c;
                        /*外填充*/
                        stroke-width: 5px;
                        stroke-dasharray: 1, 113;
                        cx:23;
                        cy:23;
                        r:18;
                        
                    }
                }
                .lrc{
                    width: r(253px);
                    .song_name{
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: r(14px);
                        line-height: r(24px);
                        color: #fff;
                        font-weight: 300;
                    }
                    .lyrics{
                        overflow: hidden;
                        height: r(18px);
                        
                        .lyrics__bd{
                                transition: -webkit-transform 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
                                transform-origin: 0px 0px 0px;
                                transform: translate3d(0px, 0px, 0px);
                            .lyrics__item{
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                color: rgba(255,255,255,.5);
                            }
                        }
                    }
                }
                .down_btn{
                    display: block;
                    width: r(26px);
                    height: r(26px);
                    fill: #31c27c;
                }
            }
            .btn_active{
                display: none;
            }
        }
    }
    
}

section{
    color: #777;
    .count_box{
        height: r(54px);
        margin: 0 r(16px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .desc{
            font-size: r(14px);
            span{
                font-size: r(14px);
                margin-left: r(5px);
            }
        }
        .collect{
            display: flex;
            align-items: center;
            height: r(55px);
            font-size: r(14px);
            color: #31c27c;
            .icon_svg{
                width: r(26px);
                height: r(26px);
                margin-left: r(5px);
                fill: #31c27c;
            }
        }
    }
    .qui_list{
        overflow: hidden;
        .lis_item{
            position: relative;
            padding: r(10px) r(16px);
            overflow: hidden;
            .title{
                overflow: hidden;
                color: #777;
                font-size: r(16px);
                font-weight: 300;
            }
            .desc{
                color: #777;
                overflow: hidden;
            }
            audio{
                width: 100%;
            }
        }
    }
    .more{
        font-size: r(14px);
        color: #777;
        text-align: center;
        height: r(32px);
        line-height: r(32px);
        margin-bottom: r(15px);
    }
}

footer{
    >h5{
        width: 100%;
        height: r(55px);
        line-height: r(55px);
        text-align: center;
        font-size: r(18px);
        color: #000;
        letter-spacing: r(5px);
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        font-weight: 300;
        padding: 0 r(40px);
        
    }
    .f_desc{
        margin: 0 r(16px) r(20px);
        overflow: hidden;
        text-align: justify;
        word-wrap: break-word;
        font-size: r(14px);
        color: #777;
    }
    .f_logo{
        text-align: center;
        color: #000;
        font-weight: 400;
        font-size: r(14px);
        span{
            font-size: r(14px);
            margin-top: r(2px);
        }
        padding: r(20px) 0;
        >img{
            display: block;
            width: r(32px);
            height: r(32px);
            margin: 0 auto;
        }
    }
}
